import React, { useState, useEffect } from 'react';

export const App = () => {
  const [visible, setVisible] = useState(true);

  return (
    <div>
      <h3>父组件</h3>
      <button onClick={() => setVisible(!visible)}>出现/消失</button>
      <hr />
      {visible ? <Counter /> : null}
    </div>
  );
};

const Counter = () => {
  const [count, setCount] = useState(0);
  const [number, setNumber] = useState(0);

  // useEffect 在组件渲染完毕后，你想执行一些操作
  // useEffect(() => {
  //   console.log('effect 执行');
  //   // 更新浏览器标题栏
  //   document.title = count;
  // }, [count]);

  // 只在组件第一次渲染后执行一次 Effect 其它数据变化时不执行
  useEffect(() => {
    console.log('子组件的effect首次渲染之后执行');
    // window 事件添加，开启一个定时器
    const resize = () => console.log('window resize');
    window.addEventListener('resize', resize);

    // 副作用处理函数返回一个函数，这个函数会在组件卸载时执行
    return () => {
      // 清理函数
      console.log('清理函数执行');
      window.removeEventListener('resize', resize);
    };
  }, []);

  // 关注 count 变化的副作用处理函数
  // useEffect(() => {
  //   console.log('count effect 执行');
  //   return () => {
  //     // count 可能产生垃圾
  //     console.log('清除count函数执行');
  //   };
  // }, [count]);

  // useEffect(() => {
  //   document.title = '点击了' + count + '次';
  // }, [number]);

  // 事件处理函数
  const handleCount = () => {
    setCount(count + 1);
  };

  // const handleNumber = () => {
  //   setNumber(number + 1);
  // };

  return (
    <div>
      <h2>count: {count}</h2>
      <button onClick={handleCount}>+1 count</button>
      {/* <br />
      <h2>number: {number}</h2>
      <button onClick={handleNumber}>+1 number</button> */}
    </div>
  );
};
